<template>
        <main-wrap :loading="true" ref="mianEle" :load="onLoad" :end="page.finished" :showOverTxt="page.lists.length>0" 
            :bodyStyle="{'padding-bottom':'50px'}" 
            :pageIndex="page.pageIndex">
            <template v-slot:header>
                <div class="wc-top-box">
                    <h5>{{curAct.activityName || '--'}}</h5>
                    <div class="tips">
                        {{text1}} {{dateTimeFormart(curAct.activityStartTime)}}-{{dateTimeFormart(curAct.activityEndTime)}}
                        <i class="iconfont icon-gantanhao-yuankuang" @click="showFlag=true"></i>
                    </div>
                    <my-dailog v-model:show="showFlag" :styleType="4" width="80%" height="80%">
                        <div class="act-rule">
                            <div class="hdgzbox" v-if="curAct.activityRule" v-html="curAct.activityRule"></div>
                            <p v-else>Not Data</p>
                        </div>
                        <template v-slot:footer>
                            <div class="act-rule-btn">
                                <my-button @click="showFlag=false"> {{text2}}</my-button>
                            </div>
                        </template>
                    </my-dailog>
                </div>
            </template>
            <div class="wcMainCon">
                <div class="mianTips" v-if="curAct.activityDesc">{{curAct.activityDesc}}</div>
                <goods-list :lists="page.lists" :type="3" @onClick="openDetail"/>
                <empty v-if="page.finished && page.lists.length<1"/>
                <teleport to='body'>
                    <div class="sjbBottomOprate">
                        <a class="item" v-if="curAct.activityStatus==3 || !curAct.activityId"><!--结束-->
                            <img src="/images/kt4.png"/>
                        </a>
                        <div v-else class="item item2" @click.stop="setData">
                            <img src="/images/kt1.png"/>
                        </div>
                        <router-link class="item" to="/worldcup/mycard">
                            <img src="/images/kt3.png"/>
                        </router-link>
                    </div>
                </teleport>
            </div>

            <my-dailog v-model:show="showFlag2" :showtopclose="true" :styleType="8">
                <cart-detail :detail="curItem" :id="curItem.cardId" :item='{}'/>
            </my-dailog>

            <my-dailog v-model:show="showFlag3" :showtopclose="true" :styleType="9">
                <div class="getCardBox">
                    <div class="cardUnioBox">
                        <fragmen-union :fragmentNoList="successData.fragmentNoList" :cardUrl="successData.cardImg"/>
                    </div>
                    <router-link to="/worldcup/mycard" class="hcBtn">
                        <my-button :styleType="2">{{text3}}</my-button>
                    </router-link>
                </div>
            </my-dailog>
        </main-wrap>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,onMounted,computed} from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import moment from 'moment'
import hasLeftNavLayout from '@/components/hasLeftNavLayout.vue'
import leftMenu from '@/components/leftMenu.vue'
import mainWrap from '@/components/mainWrap.vue'
import {toast} from '@/utils/common.js'
import Image from '@/components/image.vue';
import goodsList from '@/components/goodsList.vue';
import empty from '@/components/empty.vue'
import myDailog from '@/components/myDailog.vue';
import myButton from '@/components/myButton.vue';
import cartDetail from './components/cartDetail.vue';
import fragmenUnion from '@/components/fragmenUnion.vue'
import { useI18n } from 'vue-i18n'

export default {
    components:{
       //hasLeftNavLayout,
       mainWrap,
       leftMenu,
       Image,
       goodsList,
       empty,
       myDailog,
       myButton,
       cartDetail,
       fragmenUnion
    },
    props:{

    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()
        const {t} = useI18n()

        const state = reactive({
            // menus:[
            //     {name:'Collect',id:'wc_tab_1',disabled:false},
            //     {name:'My Card',path:'/worldcup/mycard'}
            // ],
            curMenu:'wc_tab_1',
            userInfo:computed(()=>store.state.base.userInfo),
            keyword:'',
            showFlag:false,
            showFlag2:false,
            showFlag3:false,
            sortParams:{
                orderField: 1,
                orderType: "desc",
            },
            page:{
                lists:[],
                pageIndex:1,
                pageSize:20,
                finished: false
            },
            total:0,
            curAct:{},
            curItem:{},
            successData:{},  // 收集成功后返回的数据
            text1:t('worldcup.text1'),
            text2:t('worldcup.text2'),
            text3:t('worldcup.text3'),
        })
       
        onMounted(()=>{
            getCurActivity()
            
            
            // setTimeout(()=>{
            //     state.menus[0].disabled = true
            // },3000)
        })

        const onLoad = ()=> {
            // 此函数必须返回一个Promise对象
            return new Promise((resolve, reject) => {
                setTimeout(async () => {
                    const res = await store.dispatch("activity/get_card_list", {
                        page: state.page.pageIndex,
                        limit: state.page.pageSize,
                        activityId:state.curAct.activityId
                        //...state.sortParams,
                        //goodsCategoryId:state.goodsCategoryId,
                        //keyWord:state.keyword,
                        
                    });
                    state.page.lists = [...state.page.lists, ...res.data];
                    state.page.pageIndex++;
                    state.total = res.total
                    if (state.page.lists.length >= res.total) {
                        state.page.finished = true;
                    }
                    resolve(true);
                }, 500);
            });
        }

        const dateTimeFormart =(dateTime) =>{
            if(dateTime){
                return moment(dateTime).format('YYYY-MM-DD').replace(/-/g,'.');
            }else{
                return '--'
            }
        }

        const getCurActivity = ()=>{ // 获取当前活动
            store.dispatch('activity/get_cur_activity_list',{
                walletAddress:state.userInfo.walletAddress
            })
            .then(res =>{
                state.curAct = res.data || {}
                if(res.data){
                    onLoad()
                }else{
                    state.page.finished = true;
                    state.total = 0
                    state.page.lists = []
                }
                // if(!state.curAct.activityId){
                //     state.menus[0].disabled = true  // 不能收集卡片
                //     state.menus[0].name = 'Finished'
                // }
            })
        }
        
        const resetScroll = async()=>{
            proxy.$refs.mianEle.stopScroll()
            state.page.lists=[]
            state.page.pageIndex=1
            state.page.finished=false
            await onLoad()
            proxy.$refs.mianEle.initScroll()
        }
        const getSearchData = async(keyword)=>{
            resetScroll()
        } 
        const openDetail = item=>{
            state.curItem = item
            state.showFlag2 = true
        } 

        const setData = async id=>{
            
            if(!state.curAct.activityId){
                return //toast('当前活动不存在！')
            }
            //if(state.curMenu=='wc_tab_1'){
                // 收集卡片
                const res = await store.dispatch('activity/collect_card',{
                    walletAddress:state.userInfo.walletAddress,
                    activityId:state.curAct.activityId
                }).then(res =>{
                    if(res.success){
                        state.successData = res.data
                        //state.successData.fragmentNoList = [...res.data.holdFragmentNoList,res.data.fragmentNo]
                        state.successData.fragmentNoList = [res.data.fragmentNo]
                        sessionStorage.removeItem('cardItem')
                        state.showFlag3 = true
                    }else{
                        toast(res.message)
                    }
                })
           // }
        }
        return{
            ...toRefs(state),
            setData,
            onLoad,
            getSearchData,
            openDetail,
            dateTimeFormart
        }
    }
}
</script>

<style lang="scss" scoped>
   .wc-top-box{
        display: flex;
        height: 80px;
        line-height: 80px;
        margin: 20px 0 0 0;
        padding: 0 30px 0 0;
        h5{
            flex: 1;
            padding: 0;
            margin: 0;
            font-size: 32px;
            font-family: Poppins-SemiBold, Poppins;
            font-weight: 600;
            color: #FFFFFF;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .tips{
            display: flex;
            //align-items: center;
            font-size: 28px;
            font-family: Poppins-SemiBold, Poppins;
            font-weight: 600;
            color: rgba(103,248,255,0.5);
            i{
                font-size: 28px;
                margin: 0 0 0 10px;
            }
        }
    }
    .wcMainCon{
        padding: 0;
        .mianTips{
            font-size: 28px;
            line-height: 38px;
            font-family: Poppins-Medium, Poppins;
            font-weight: 500;
            color: rgba(255,255,255,0.5);
        }
    }
    .act-rule{
        font-size: 28px;
        padding: 20px;
        .hdgzbox{
            white-space: pre-wrap;
        }
    }
    .act-rule-btn{
        width: 200px;
        margin: 0 auto;
    }
    .getCardBox{
        padding: 35px 40px;
        .hcBtn{
            display: block;
            width: 300px;
            margin: 30px auto 0 auto;
        }
    }
    .sjbBottomOprate{
        position: fixed;
        z-index: 100;
        height: 95px;
        bottom: 10px;
        left: 50%;
        margin: 0;
        transform: translateX(-50%);
        -webkit-transform:translateX(-50%);
        .item{
            float: left;
            height: 100%;
            padding: 7px 0 0 0;
            &+.item{
                margin-left: 20px;
            }
            img{
                display: block;
                height:75px;
            }
            &.item2{
                padding: 0;
                img{
                    height:95px;
                }
            }
        }
    }
</style>